<template>
  <div class="brand_zone">
    <div class="brand_list clearfix">
      <router-link class="brand" v-for="item in brands" :key="item.id" :to="'/brandId/?id=' + item.id" target="_blank">
        <b>
          <img :src="item.pc_logo_image" alt="">
        </b>
        <p>{{item.name}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { brands } from '@/api/category'
export default {
  name: 'brandZone',
  metaInfo: {
    title: '品牌导航',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      brands: []
    }
  },
  created () {
    this.fetchBrands()
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    async fetchBrands () {
      this.brands = await brands()
    }
  }
}
</script>

<style lang="scss" scoped>
.brand_zone {
  width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
  z-index: 0;
  .brand_list {
    display: block;
    a {
      position: relative;
      float: left;
      width: 240px;
      *width: 238px;
      position: relative;
      height: 120px;
      overflow: hidden;
      border: 1px solid #f2f2f2;
      box-sizing: border-box;
      text-align: center;
      background: #fff;
      -webkit-transition: linear .2s;
      -o-transition: linear .2s;
      transition: linear .2s;
      b {
        height: 117px;
        display: block;
        vertical-align: middle;
        text-align: center;
        img {
          vertical-align: middle;
          max-width: 114px;
          max-height: 68px;
          margin-top: 15px;
        }
      }
      p {
        display: none;
        position: absolute;
        width: 100%;
        height: 34px;
        z-index: 10;
        line-height: 34px;
        left: 0px;
        bottom: 0px;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        font-size: 14px;
        background: #4448f8;
      }
    }
    a:hover {
      -webkit-transform: scale(1.04);
      -ms-transform: scale(1.04);
      -o-transform: scale(1.04);
      transform: scale(1.04);
      -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
      box-shadow: 0 0 30px rgba(0,0,0,0.1);
      z-index: 9;
      // p {
      //   display: block;
      //   transform: translate3d(0px, 100%, 0px);
      //   background: rgb(36, 195, 199);
      //   transition: all 0.2s ease-in-out 0s;
      // }
    }
  }
  .clearfix {
    zoom: 1;
  }
  .brand:hover {
    p {
      display: block;
    }
  }
}
</style>
